import React, { memo, useState, useCallback } from 'react';
import { Button, message, Modal, Icon, Form } from 'antd';

import { isSuccess } from '@/utils/request';
import { hrOverviewRecheck } from '@/services/salaryManage/salaryCalculate';

import LimitInput from '@/components/LimitInput';

import styles from '../index.less';

const { rejectCheck } = hrOverviewRecheck;

// 复审驳回
const PassRejectCheck = memo(
    ({ form, handleItem, year, month, period, actionType, organizationCode, updateStateFn }) => {
        // 弹窗=》确定按钮是否加载状态
        const [confirmLoad, setConfirmLoad] = useState(false);

        const { getFieldDecorator, getFieldsValue } = form;

        // 驳回弹窗
        const [visible, setVisible] = useState(false);

        // 开启弹窗
        const handleFn = useCallback(async () => {
            setVisible(true);
        }, []);

        // 确认按钮
        const modelOk = useCallback(async () => {
            setConfirmLoad(true);
            const rejectRes = await rejectCheck({
                year,
                month,
                organizationCode,
                actionType,
                ...getFieldsValue()
            });

            if (isSuccess(rejectRes)) {
                setVisible(false);
                updateStateFn(rejectRes); // 驱动更新
            } else {
                message.error(rejectRes.msg);
            }
            setConfirmLoad(false);
        }, [actionType, getFieldsValue, month, organizationCode, updateStateFn, year]);

        return (
            <>
                <Button key={handleItem.code} onClick={handleFn}>
                    {handleItem.name}
                </Button>
                <Modal
                    title="驳回"
                    visible={visible}
                    onOk={modelOk}
                    confirmLoading={confirmLoad}
                    centered
                    destroyOnClose
                    onCancel={async () => {
                        setVisible(false);
                    }}
                >
                    <div className={styles.msg}>
                        <Icon type="exclamation-circle" theme="filled" />
                        将驳回{period}全部薪资，请确认
                    </div>
                    <Form layout="inline" className={styles.recheckForm}>
                        <Form.Item label="驳回备注">
                            {getFieldDecorator('rejectReason')(
                                <LimitInput rows={4} cols={45} maxLength={200} area showNumber placeholder="请输入" />
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </>
        );
    }
);

export default memo(Form.create()(PassRejectCheck));
